<template>
<view>
	<form @submit='tijiao'>
	
	  <view class='group'>
	
	    <view class='group-header'>留言内容</view>
	    <view class='group-body'>
	      <textarea placeholder='请输入留言' name="nr" ></textarea>
	    </view>
	
	   <view class='group-header'>联系信息</view>
	    <view class='group-body'>
	
	      <view class='input-item'>
	        <text class='input-item-label'>联系人</text>
	        <view class='input-item-content'>
	          <input type='text' name="lxr" placeholder='请输入姓名'></input>
	        </view>
	      </view>
	      <view class='input-item'>
	        <text class='input-item-label'>手机号码</text>
	        <view class='input-item-content'>
	          <input type='text' name="sj" placeholder='请输入手机号码'></input>
	        </view>
	      </view>
	      <view class='input-item'>
	        <text class='input-item-label'>联系邮箱</text>
	        <view class='input-item-content'>
	          <input type='text' name="yx" placeholder='请输入邮箱'></input>
	        </view>
	      </view>            
	
	    </view>
	
	    <view class='btn-submit'>
	      <button class='btn'  form-type="submit">确认提交</button>
	    </view>
	
	    <view class='tiwen'>
	        <text>如问题无法简单描述清楚</text>
	        <text>可以直接拨打电话</text>
	        <view @click='dadianhua' data-tel='400-123-456'>400-123-456</view>
	    </view>
	   
	  </view>
	</form>	
</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			 tijiao:function(e){
				//http://qiyephp.yaoyiwangluo.com/h5/wx_api_liuyan.php
				//提交留言 this.$WebURL.WebUrl.phpweb +'/h5/wx_api_liuyan.php'
				//lianxiren联系人  shouji手机  youxiang邮箱  neirong内容
				uni.request({
					url:this.$WebURL.WebUrl.phpweb +'/h5/wx_api_liuyan.php',
					data:{
						lianxiren:e.detail.value.lxr,
						shouji:e.detail.value.sj,
						youxiang:e.detail.value.yx,
						neirong:e.detail.value.nr
					},
					success: (res) => {
						console.log(res.data)
						wx.showModal({
							title:"留言提交",
							content:"提交成功",
							showCancel:false,
							success:function(res2){
								if(res2.confirm){
									uni.switchTab({
										url:"/pages/a/a"
									})
								}
							}
						})
					}
				})
				
			  },
			  
			 dadianhua:function(e){
				 uni.makePhoneCall({
				 	phoneNumber:"123456"
				 })
			 } 
		}
	}
</script>

<style>
.group{
  display: flex; flex-direction: column;box-sizing: border-box;
}
.group-header{
  line-height: 30px; 
  background-color: #f9f9f9;
  padding: 0 5px;
  border-bottom: 1px solid gainsboro;
}
.group-body{
  border-bottom: 1px solid gainsboro;
  padding: 0 5px;
}
.input-item{
  padding: 5px;
  display: flex;
  border-bottom: 1px dotted gainsboro;
}
.input-item-label{
  display: block;
  width: 5em;
  color: gray;
}
.input-item-content{
  color: gray;
  flex:1;
}
.btn-submit{
   padding: 5px;
}
.btn{
  border-radius: 5px;
  background: orange;
  color: white;
}
.tiwen{
  display: flex;
  flex-direction: column;
  text-align: center;
}
.tiwen text{
  color: grey;
  font-size: 12px;
}
.tiwen view{
  color: orange;
  font-size: 18px;
}

</style>
